<template>
  <div class="category-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="商品分类" left-arrow @click-left="onClickLeft" fixed />

    <div class="category-container">

      <div class="category-content">
        <!-- 筛选栏 -->
        <div class="filter-bar">
          <van-tabs v-model="active" @change="getshopList">
            <van-tab v-for="(item, index) in list" :key="index" :title="item" :name="item">
            </van-tab>
          </van-tabs>
        </div>

        <!-- 商品网格 -->
        <van-grid :column-num="2" :border="false" class="goods-grid">
          <van-grid-item v-for="(item, index) in goodsList" :key="index" class="goods-item"
            @click="$router.push('/detail?id=' + item.proid)">
            <div class="goods-card">
              <van-image :src="item.img1" alt="商品图片" class="goods-image" fit="cover" />
              <div class="goods-info">
                <h3 class="goods-name">{{ item.proname }}</h3>
                <p class="goods-price">¥{{ item.originprice.toFixed(2) }}</p>
                <div class="goods-footer">
                  <span class="goods-sales">销量: {{ item.sales }}</span>
                  <van-icon name="cart" class="add-cart" />
                </div>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <!-- 底部导航 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="$router.push('/home')">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="$router.push('/prolist')">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o" @click="$router.push('/cart')">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" @click="$router.push('/my')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getProductCategoryList, getProSearch } from "../api/productList.js";
export default {
  data() {
    return {
      active: 0,
      activeKey: 0,
      activeFilter: 0,
      activeTab: 1,
      list: [],
      goodsList: [
        {
          proid: 1,
          proname: '时尚休闲牛仔裤',
          originprice: 129.99,
          sales: 1256,
          img1: 'https://picsum.photos/300/300?random=1'
        },
      ]
    }
  },
  methods: {
    onClickLeft() {
      // 实际项目中这里会使用路由返回
      console.log('返回上一页')
    },
    getshopList(name) {
      console.log(name);
      getProSearch(name).then(res => {
        console.log(res)
        this.goodsList = res.data.data;
      })
    }
  },
  mounted() {
    getProductCategoryList().then(res => {
      console.log(res)
      this.list = res.data.data;
    })
  }
}
</script>

<style scoped>
.category-page {
  padding-top: 46px;
  /* 导航栏高度 */
  padding-bottom: 50px;
  /* 底部导航高度 */
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.category-container {
  display: flex;
  height: calc(100vh - 96px);
}

.category-sidebar {
  width: 80px;
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
}

.category-content {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.filter-bar {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
}

.goods-grid {
  background-color: transparent;
}

.goods-item {
  padding: 5px;
}

.goods-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.goods-image {
  width: 100%;
  height: 140px;
}

.goods-info {
  padding: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.goods-name {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 5px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 39px;
}

.goods-price {
  color: #f44336;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.goods-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.goods-sales {
  font-size: 12px;
  color: #999;
}

.add-cart {
  color: #f44336;
  font-size: 20px;
}
</style>
